<template>
  <div class="header__menu" v-if="permission_routes">
    <el-menu :default-active="activeMenu" text-color="rgb(0, 65, 119)" :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="horizontal" menu-trigger="hover">
      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import SidebarItem from '@/layout/components/Sidebar/SidebarItem.vue'
import variables from '@/styles/variables.scss'

export default {
  name: 'HeaderMenu',
  components: {
    SidebarItem
  },
  computed: {
    ...mapGetters([
      'permission_routes',
    ]),
    activeMenu() {
      const route = this.$route
      const {
        meta,
        path
      } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    variables() {
      return variables
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.header__menu {
  @include flex-center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 10px;

  ::v-deep {
    .el-menu {
      @include flex-center;
      flex-direction: column;
      background-color: transparent;
      align-items: flex-start;
      height: 100%;
      border: 0px;
      width: 100%;

      div {
        width: 100%;
      }
    }

    .el-submenu,
    .el-submenu__title {
      font-size: larger;
    }

    .el-menu--horizontal {

      .el-submenu__title,
      .el-menu-item {
        font-size: medium;
        font-weight: 500;
        position: relative;
        cursor: pointer;
        border-radius: 16px !important;
        overflow: visible !important;
        transition:
          color 0.2s ease,
          background 0.2s ease,
          border-radius 0.2s ease,
          transform 0.2s ease;

        &:hover {
          background: linear-gradient(to right, rgba(199, 224, 255, 0.05), rgba(72, 151, 248, 0.1));
          transform: translateY(-1px);

          &::after {
            transform: scaleX(1);
          }
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: currentColor;
          transform: scaleX(0);
          transform-origin: center;
          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 1;
        }
      }
    }
  }
}
</style>
